{extend name="./public/base" /}
{block name="title"}个人资料{/block}
{block name="style"}
<style type="text/css">
	.content{
		width: 100%;
		background-color:#fff;
		font-size: 32px;
		color: #6e5858;
	}
	.top{
		width: 100%;
	    background-color: #ffba58;;
	    height: 80px;
	    color: #fff;
	    text-align: center;
	    line-height: 80px;
	    font-size: 32px;
	}
	.back{
		float: left;
	    margin-top: 14px;
	    padding-left: 10px;
	}
	.photo{
		width: 100%;
	   /* height: 29%;*/
	   	height:600px;
	    background-color: #f3f1f114;
	    margin: auto;
	    border-radius: 15px;
	    box-shadow: 0px 5px 2px 2px #f3f1f1f5;
	}
	.tags{
		width: 90%;
	    background-color: #fff;
	    margin: auto;
	    border-radius: 15px;
	    box-shadow: 0px 5px 2px 2px #f3f1f1f5;
	    position: relative;
	    padding: 10px;
	    height:400px;
	}

	.tags img{
		width: 100%;
		height:100%;
	}

	.line{
		height: 2px;
	    background-color: #edecec;
	    margin: 40px auto;
	    width: 90%;
	}
	.line1{
		height: 2px;
	    background-color: #edecec;
	    margin: 40px auto;
	    width: 90%;
	    margin-top: -20px;
	}

	
	.info{
		width: 90%;
	    background-color: #f3f1f114;
	    margin: auto;
	    border-radius: 15px;
	    box-shadow: 0px 5px 2px 2px #f3f1f1f5;
	    position: relative;
	    top: 20px;
	}
	.info_list{
		width: 90%;
	}
	.my_info{
		width: 110%;
		padding-bottom: 30px;
		font-size: 28px;
		color:#8c90a6;
	}
	.my_info .item span{
		display:  inline-block; 
		width: 30%;
	}
	.my_info .item .img{
		width: 80px;
	    height: 80px;
	    padding-left: 40px;
	    padding-right: 40px;
	    position: relative;
	    top: 20px;
	}
	.my_info .item .tab{
		width: 60px;
	    height: 60px;
	    padding-left: 250px;
	    position: relative;
	}

	.my_info .item img{
		width: 100%;
		height: 100%;
	}

	.info_list .item span{
	 	display: inline-block;
	}
	
</style>
{/block}
{block name="main"}
	<div id="app_content" class="content"> 
		<div class="top" >
			<span class="back"><img onclick="javascript:history.back(-1);" src="__STATIC__/images/back5.png" alt=""></span>
			<span>{{text11}}</span>
		</div>
		<div class="tags">
			<img src="__STATIC__/images/vipcard.png" alt="">
		</div>
		<div class="info">
			<div class="info_list">
				<div class="my_info">
					<div class="item">
						<span class="img"><img src="__STATIC__/images/member.png" alt=""></span><span class="lable">荣誉会员</span><span class="tab"><div class="button"  @click="honor()">开通</div></span>
					</div>
					<div class="line"></div>
					<div class="item">
						<span class="img"><img src="__STATIC__/images/member.png" alt=""></span><span class="lable">单独介绍</span><span class="tab"><div class="button"  @click="single()">开通</div></span>
					</div>
					<!-- <div class="line"></div>
					<div class="item">
						<span class="img"><img src="__STATIC__/images/member.png" alt=""></span><span class="lable">会员服务</span><span class="tab"><div class="button">开通</div></span>
					</div>
					<div class="line"></div>
					<div class="item">
						<span class="img"><img src="__STATIC__/images/member.png" alt=""></span><span class="lable">会员服务</span><span class="tab"><div class="button">开通</div></span>
					</div> -->
				</div>

				
			</div>
		</div>
	</div>
{/block}
{block name="script"}
<script type="text/javascript" >
    $(document).ready(function(){ 
		var host = "http://"+document.domain+"/api.php/";
		var vm  = new Vue({
			el: '#app_content',
			data: {
			    text11:'会员服务',
			},
		    methods:{
		    	honor:function(){
		    		console.log(34325456);
		        	var t = this;
		        	window.location.href = "{:url('apply')}";
		        },
		        single:function(){
		        	var t = this;
		        	$.toast('该服务暂未开通！','text');
		        },
		    },
		    mounted: function () {
	            console.log("已初始化");
	          
	        }

		})
		

		
	});
</script>
{/block}